<template>
  <div class>
    <div class="vw_works_list" v-for="item in 3">
      <!-- 点击出现弹出框    @click="dialogVisible = true"-->
      <div>
        <a
          @click="dialogVisible = true"
          class="vw_works_part"
          style=" display:block; width: 500px; height: 400px; margin-right: 10px;"
        >
          <span class="w_pui_works_image">
            <span class="cc_image_main">
              <!-- 图片     -->
              <span class="img-item">
                <img
                  style=" display: block; margin-left: -0.0117096px; height: 100%; width: auto; margin-top: auto;"
                  src="//pic3-nc.pocoimg.cn/image/poco/works/97/2021/0915/09/16316699697414222_174940705_W640.JPG"
                />
              </span>
              <span class="info-item">
                <!-- <i class="cc_shaow t_shaow"></i>
                <i class="cc_shaow b_shaow"></i>-->
                <div class="cc_t_item">
                  <span class="cc_mod_btn view_btn">
                    <em>54167</em>游览
                  </span>
                  <span class="cc_mod_btn images_btn">
                    <em>16</em>
                    <i class="icon iconfont icon-wenjian"></i>
                  </span>
                  <span class="cc_mod_btn images_btn" style="display:none"></span>
                </div>
                <span class="cc_b_item">
                  <span class="cc_user_item">
                    <span class="user_img">
                      <div class="w_default_avatar" @click="$router.push('/。。。')">
                        <a class="avatar-wrapper size-30 cd"></a>
                      </div>
                    </span>
                    <h4 class="user_name cx" @click="$router.push('/。。。')">王大江</h4>
                  </span>
                </span>
                <span class="cc_like_btn" style>
                  <div class="w_like_button">
                    <div class="like-button-wrapper cc_like_button">
                      <!-- 先登录 -->
                      <span
                        class="iconfont icon-dianzan like-font"
                        style="color: rgb(170, 170, 170);"
                      ></span>

                      <span class="like-conut">255</span>
                    </div>
                  </div>
                </span>
              </span>
            </span>
          </span>
        </a>
        <a
          @click="dialogVisible = true"
          class="vw_works_part"
          style="display: block; width: 240px; height: 400px; margin-right: 10px;"
        >
          <span class="w_pui_works_image">
            <span class="cc_image_main">
              <span class="img-item">
                <img
                  style="opacity: 1; display: block; margin-left: -0.0117096px; height: 100%; width: auto; margin-top: auto;"
                  src="//pic3-nc.pocoimg.cn/image/poco/works/20/2021/0915/10/16316731947558261_201860885_H480.jpg"
                />
              </span>
              <span class="info-item">
                <!-- <i class="cc_shaow t_shaow"></i>
                <i class="cc_shaow b_shaow"></i>-->
                <div class="cc_t_item">
                  <span class="cc_mod_btn view_btn">
                    <em>54167</em>游览
                  </span>
                  <span class="cc_mod_btn images_btn">
                    <em>16</em>
                    <i class="icon iconfont icon-wenjian"></i>
                  </span>
                  <span class="cc_mod_btn images_btn" style="display:none"></span>
                </div>
                <span class="cc_b_item">
                  <span class="cc_user_item">
                    <span class="user_img">
                      <div class="w_default_avatar">
                        <a class="avatar-wrapper size-30 cd"></a>
                      </div>
                    </span>
                    <h4 class="user_name cb">王大江</h4>
                  </span>
                </span>
                <span class="cc_like_btn" style>
                  <div class="w_like_button">
                    <div class="like-button-wrapper cc_like_button">
                      <span
                        class="iconfont icon-dianzan like-font"
                        style="color: rgb(170, 170, 170);"
                      ></span>
                      <span class="like-conut">255</span>
                    </div>
                  </div>
                </span>
              </span>
            </span>
          </span>
        </a>
        <a
          @click="dialogVisible = true"
          class="vw_works_part"
          style="display: block; width: 240px; height: 400px; margin-right: 0px;"
        >
          <span class="w_pui_works_image">
            <span class="cc_image_main">
              <span class="img-item">
                <img
                  style=" display: block; margin-left: -0.0117096px; height: 100%; width: auto; margin-top: auto;"
                  src="//pic3-nc.pocoimg.cn/image/poco/works/99/2021/0908/15/16310856946075733_201710642_H480.jpg"
                />
              </span>
              <span class="info-item">
                <!-- <i class="cc_shaow t_shaow"></i>
                <i class="cc_shaow b_shaow"></i>-->
                <div class="cc_t_item">
                  <span class="cc_mod_btn view_btn">
                    <em>54167</em>游览
                  </span>
                  <span class="cc_mod_btn images_btn">
                    <em>16</em>
                    <i class="icon iconfont icon-wenjian"></i>
                  </span>
                  <span class="cc_mod_btn images_btn" style="display:none"></span>
                </div>
                <span class="cc_b_item">
                  <span class="cc_user_item">
                    <span class="user_img">
                      <div class="w_default_avatar">
                        <a class="avatar-wrapper size-30 cd"></a>
                      </div>
                    </span>
                    <h4 class="user_name cb">王大江</h4>
                  </span>
                </span>
                <span class="cc_like_btn" style>
                  <div class="w_like_button">
                    <div class="like-button-wrapper cc_like_button">
                      <span
                        class="iconfont icon-dianzan like-font"
                        style="color: rgb(170, 170, 170);"
                      ></span>
                      <span class="like-conut">255</span>
                    </div>
                  </div>
                </span>
              </span>
            </span>
          </span>
        </a>

        <a
          @click="dialogVisible = true"
          class="vw_works_part"
          style="display: block; width: 240px; height: 400px; margin-left: 0px;"
        >
          <span class="w_pui_works_image">
            <span class="cc_image_main">
              <span class="img-item">
                <img
                  style=" display: block; margin-left: -0.0117096px; height: 100%; width: auto; margin-top: auto;"
                  src="//pic3-nc.pocoimg.cn/image/poco/works/03/2021/0915/10/16316730639419644_201718751_H480.JPG"
                />
              </span>
              <span class="info-item">
                <!-- <i class="cc_shaow t_shaow"></i>
                <i class="cc_shaow b_shaow"></i>-->
                <div class="cc_t_item">
                  <span class="cc_mod_btn view_btn">
                    <em>54167</em>游览
                  </span>
                  <span class="cc_mod_btn images_btn">
                    <em>16</em>
                    <i class="icon iconfont icon-wenjian"></i>
                  </span>
                  <span class="cc_mod_btn images_btn" style="display:none"></span>
                </div>
                <span class="cc_b_item">
                  <span class="cc_user_item">
                    <span class="user_img">
                      <div class="w_default_avatar">
                        <a class="avatar-wrapper size-30 cd"></a>
                      </div>
                    </span>
                    <h4 class="user_name cb">王大江</h4>
                  </span>
                </span>
                <span class="cc_like_btn" style>
                  <div class="w_like_button">
                    <div class="like-button-wrapper cc_like_button">
                      <span
                        class="iconfont icon-dianzan like-font"
                        style="color: rgb(170, 170, 170);"
                      ></span>
                      <span class="like-conut">255</span>
                    </div>
                  </div>
                </span>
              </span>
            </span>
          </span>
        </a>
        <a
          @click="dialogVisible = true"
          class="vw_works_part"
          style="display: block; width: 240px; height: 400px; margin-left: 0px;"
        >
          <span class="w_pui_works_image">
            <span class="cc_image_main">
              <span class="img-item">
                <img
                  style=" display: block; margin-left: -0.0117096px; height: 100%; width: auto; margin-top: auto;"
                  src="//pic3-nc.pocoimg.cn/image/poco/works/98/2021/0914/21/16316272725977736_54977030_H480.jpg"
                />
              </span>
              <span class="info-item">
                <!-- <i class="cc_shaow t_shaow"></i>
                <i class="cc_shaow b_shaow"></i>-->
                <div class="cc_t_item">
                  <span class="cc_mod_btn view_btn">
                    <em>54167</em>游览
                  </span>
                  <span class="cc_mod_btn images_btn">
                    <em>16</em>
                    <i class="icon iconfont icon-wenjian"></i>
                  </span>
                  <span class="cc_mod_btn images_btn" style="display:none"></span>
                </div>
                <span class="cc_b_item">
                  <span class="cc_user_item">
                    <span class="user_img">
                      <div class="w_default_avatar">
                        <a class="avatar-wrapper size-30 cd"></a>
                      </div>
                    </span>
                    <h4 class="user_name cb">王大江</h4>
                  </span>
                </span>
                <span class="cc_like_btn" style>
                  <div class="w_like_button">
                    <div class="like-button-wrapper cc_like_button">
                      <span
                        class="iconfont icon-dianzan like-font"
                        style="color: rgb(170, 170, 170);"
                      ></span>
                      <span class="like-conut">255</span>
                    </div>
                  </div>
                </span>
              </span>
            </span>
          </span>
        </a>
        <a
          @click="dialogVisible = true"
          class="vw_works_part"
          style=" display:block; width: 500px; height: 400px; margin: 0px;"
        >
          <span class="w_pui_works_image">
            <span class="cc_image_main">
              <!-- 图片     -->
              <span class="img-item">
                <img
                  style=" display: block; margin-left: 0px; height: 100%; width: auto; margin-top: auto;"
                  src="//pic3-nc.pocoimg.cn/image/poco/works/50/2021/0915/10/16316713154803611_201713717_W640.jpg"
                />
              </span>
              <span class="info-item">
                <!-- <i class="cc_shaow t_shaow"></i>
                <i class="cc_shaow b_shaow"></i>-->
                <div class="cc_t_item">
                  <span class="cc_mod_btn view_btn">
                    <em>54167</em>游览
                  </span>
                  <span class="cc_mod_btn images_btn">
                    <em>16</em>
                    <i class="icon iconfont icon-wenjian"></i>
                  </span>
                  <span class="cc_mod_btn images_btn" style="display:none"></span>
                </div>
                <span class="cc_b_item">
                  <span class="cc_user_item">
                    <span class="user_img">
                      <div class="w_default_avatar" @click="$router.push('/。。。')">
                        <a class="avatar-wrapper size-30 cd"></a>
                      </div>
                    </span>
                    <h4 class="user_name cx" @click="$router.push('/。。。')">王大江</h4>
                  </span>
                </span>
                <span class="cc_like_btn" style>
                  <div class="w_like_button">
                    <div class="like-button-wrapper cc_like_button">
                      <!-- 先登录 -->
                      <span
                        class="iconfont icon-dianzan like-font"
                        style="color: rgb(170, 170, 170);"
                      ></span>

                      <span class="like-conut">255</span>
                    </div>
                  </div>
                </span>
              </span>
            </span>
          </span>
        </a>
      </div>
    </div>

    <div class="pop-up-box">
      <!-- 弹出框 el-dialog-->
      <el-dialog v-model="dialogVisible" width="1400px">
        <!-- 弹出框内容 -->
        <!-- <popups></popups> -->
        <div class="box-content">
          <div class="preview">
            <el-carousel
              :autoplay="false"
              arrow="always"
              height="370px"
              setActiveItem
              v-model="carousel"
              @change="test1"
              ref="lun1"
            >
              <el-carousel-item v-for="image in images" :key="image">
                <img id="view" :src="image" />
              </el-carousel-item>
            </el-carousel>

            <el-carousel
              :autoplay="false"
              arrow="never"
              height="92px"
              type="card"
              class="min"
              v-model="carousel"
              @change="test2"
              ref="lun2"
            >
              <el-carousel-item v-for="image in images" :key="image">
                <img id="view1" :src="image" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="info-details">
            <div class="user-img">
              <img :src="user.user_image" alt @click="$router.push('/works')" />
              <div class="user-desc">
                <span>昵称{{user.username}}</span>
                <span>等级</span>
              </div>
              <button class="attention-plus" v-show="isShow" @click="isShow=!isShow">
                <i class="el-icon-plus" style="font-size:16px">关注</i>
              </button>
              <button class="attention-check" v-show="!isShow" @click="isShow=!isShow">
                <i class="el-icon-check" style="font-size:16px">关注</i>
                <p>取消关注</p>
              </button>
            </div>
            <div class="work-details">
              <div class="work-desc">
                <div class="work-background">
                  <p>标题</p>
                  <p>标签</p>

                  <p>
                    <span>发表日期</span>
                    <span>游览数</span>
                    <span>分类：</span>
                  </p>
                  <div class="icon">
                    <button class="icon-like" v-show="icon" @click="icon=!icon">
                      <span class="iconfont icon-aixin" @click="aixin"></span>
                      <span>点赞</span>
                    </button>
                    <button class="icon-like1" v-show="!icon" @click="icon=!icon">
                      <span class="iconfont icon-aixin" @click="aixin"></span>
                      <span>点赞</span>
                    </button>
                    <button
                      class="icon-collect"
                      style="padding-left: 130px;"
                      v-show="icona"
                      @click="icona=!icona"
                    >
                      <i class="el-icon-star-on" style="font-size:17px;"></i>
                      <span>收藏</span>
                    </button>
                    <button
                      class="icon-collect1"
                      v-show="!icona"
                      @click="icona=!icona"
                      style="padding-left: 130px;"
                    >
                      <i class="el-icon-star-on" style="font-size:17px;"></i>
                      <span>收藏</span>
                    </button>
                  </div>
                </div>
                <hr />
              </div>

              <div class="work-img">
                <img
                  src="//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/widget/poco_image_preview_v2/i/icon-tudejiushihaowan_dfcc32b.png"
                />

                <p class="download-text">
                  扫码下载
                  <span>POCO摄影</span>
                  >>
                </p>
                <img
                  src="//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/widget/pui_down_app_bar/i/logo-icon_61718cb.png"
                />
                <img
                  src="//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/widget/poco_login_panel/i/icon-qrcode_016e794.png"
                />
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      icona: true,
      icon: true,
      isShow: true,
      images: [
        "//pic3-nc.pocoimg.cn/image/poco/works/85/2021/0906/19/16309268612819387_201710642_W640.png",
        "http://hbimg.b0.upaiyun.com/3d3bbb5626df7c0a52b0e665eea40a45dde19b051b795-9m8Sul_fw658",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic27.nipic.com%2F20130307%2F8984340_113532918000_2.jpg&refer=http%3A%2F%2Fpic27.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630313964&t=27d645c315d023a01222f835888a27e2",
        "//pic3-nc.pocoimg.cn/image/poco/works/05/2021/0730/18/16276392606743604_201710642_W640.jpg"
      ],
      user: {
        user_image:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11642496893%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630206237&t=e31aca58152407dc03641893f1dcd97c"
      },
      dialogVisible: false //弹出框
    };
  },
  methods: {
    test1(a) {
      // console.log(a);
      this.$refs.lun2.setActiveItem(a);
    },
    test2(a) {
      // console.log(a);
      this.$refs.lun1.setActiveItem(a);
    }
  }
};
</script>
<style lang="less" scoped>
.vw_works_list {
  width: 100%;
  margin: 0 auto;
  .vw_works_part {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    .w_pui_works_image {
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .cc_image_main {
      display: block;
      overflow: hidden;
      .img-item {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        a img {
          border: 0;
        }
      }
      .info-item:hover {
        opacity: 1;
      }
      .info-item {
        opacity: 0;
        z-index: 2;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: #fff;

        .cc_t_item {
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          padding: 15px 15px 0;
          box-sizing: border-box;
          .cc_mod_btn {
            float: right;
            margin-left: 10px;
            background: rgba(4, 5, 5, 0.4);
            font-size: 14px;
            padding: 0 10px;
            height: 28px;
            line-height: 28px;
            em {
              margin-right: 10px;
            }
            .icon {
              display: inline-block;
              vertical-align: middle;
              font-size: 17px;
            }
          }
        }
        .cc_b_item {
          display: block;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          padding: 0 15px 0;
          box-sizing: border-box;

          .cc_user_item {
            float: left;
            width: 50%;
            .user_img {
              float: left;
              width: 40px;
              height: 40px;
              .w_default_avatar {
                position: relative;
                .size-30 {
                  width: 40px;
                  height: 40px;
                  font-size: 20px;
                }
                .cd {
                  background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11642496893%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630206237&t=e31aca58152407dc03641893f1dcd97c");
                }
                .avatar-wrapper {
                  display: inline-block;
                  border-radius: 100%;
                  background-size: 100%;
                  cursor: pointer;
                }
              }
            }
            .cb {
              margin-left: 22px;
            }
            .cx {
              margin-left: -39px;
            }
            .user_name {
              float: left;
              height: 40px;
              width: 100%;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              line-height: 40px;
              font-size: 14px;
              // padding-left: 2px;
              margin-top: -35px;
              box-sizing: border-box;
              color: #fff;
            }
          }
        }
        .cc_like_btn {
          position: absolute;
          bottom: 20px;
          right: 15px;
          z-index: 2;
          display: block;
          height: 35px;
          width: 65px;
          background: rgba(225, 225, 225, 0.9);
          .w_like_button {
            display: inline-block;
            .cc_like_button {
              overflow: hidden;
              cursor: pointer;
              line-height: 30px;
            }

            .like-button-wrapper {
              display: inline-block;
              padding-top: 3px;
              padding-right: 4px;
              font-size: 14px;
              color: rgb(59, 54, 54);
            }
            .like-font {
              display: inline-block;
              margin-right: 2px;
              padding-left: 5px;
              padding-right: 5px;
              font-size: 18px;
              vertical-align: middle;
              cursor: pointer;
              color: #000;
            }

            .like-count {
              font-size: 14px;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
}

 
.pop-up-box {
  /deep/.el-dialog{
    background-color: #000;
  }
}
  .box-content {
    min-width: 800px;
    display: flex;
 background-color: #000;
    .preview {
      float: left;
      flex: 2;
      margin-left: -40px;

      #view {
        width: 75%;
        height: 100%;
      }
      .min {
        margin-top: 20px;
        /deep/.el-carousel__indicator--horizontal {
          display: none;
        }
        /deep/.el-carousel__mask {
          width: 0;
        }
      }
      #view1 {
        width: 40%;
        height: 90%;
      }
    }
    .info-details {
      flex: 1;
      margin-right: 10px;
      .user-img {
        display: flex;
        height: 100px;
        padding-left: 10px;
        background-color: #242424;
        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          margin-top: 20px;
          margin-left: 20px;
        }
        .attention-plus {
          width: 75px;
          height: 45px;
          font-size: 14px;
          background: #46d233;
          color: #fff;
          margin-left: 230px;
          margin-top: 25px;
          border: 0px solid;
        }
        .attention-check {
          width: 75px;
          height: 45px;
          font-size: 14px;
          background: #2f2f2f;
          color: #fff;
          margin-left: 230px;
          margin-top: 25px;
          border: 0px solid;
        }
        p {
          display: none;
        }
        .attention-check:hover p {
          display: block;
        }
        .attention-check:hover i {
          display: none;
        }
        .user-desc {
          color: #fff;
          display: flex;
          flex-direction: column;
          margin-top: 28px;
          margin-left: 10px;
          text-align: left;
          font-size: 14px;
          line-height: 20px;
        }
      }
      .work-details {
        margin-top: 35px;
        color: #fff;
        text-align: left;

        .work-desc {
          background-color: #242424;
          .work-background {
            padding-left: 35px;
          }
        }
        p:nth-child(1) {
          font-size: 20px;
          padding-top: 15px;
          margin-bottom: 25px;
        }

        p:nth-child(2) {
          font-size: 15px;
          margin-bottom: 25px;
        }

        p:nth-child(3) {
          font-size: 13px;
          color: #887d7d;
          margin-bottom: 25px;
          span:nth-last-child(2) {
            margin: 120px;
          }
        }
        .icon {
          font-size: 13px;

          margin-bottom: 20px;

          button {
            background-color: #242424;
            border: 0px solid;
            color: #887d7d;
          }
          .icon-like1 {
            span {
              color: red;
            }
          }
          .icon-collect1 {
            i {
              color: rgb(224, 138, 24);
            }
          }
        }
        .work-img {
          margin-top: 30px;
          margin-bottom: 10px;
          position: relative;
          height: 120px;
          background: #131313;
          img:nth-child(1) {
            position: absolute;
            top: 23px;
            left: 10px;
            width: 180px;
          }
          .download-text {
            position: absolute;
            top: 87px;
            left: 23px;
            font-size: 9px;
            line-height: 13px;
            color: #fff;
            span {
              padding: 0 4px;
              color: #46d233;
            }
          }
          img:nth-child(3) {
            position: absolute;
            top: 15px;
            left: 250px;
            width: 85px;
            height: 90px;
          }
          img:nth-child(4) {
            position: absolute;
            left: 365px;
            top: 15px;
            border: 2px solid #fff;
            width: 85px;
            height: 85px;
          }
        }
      }
    }
  }

</style>